<template>
    <div class="content">
        <div class="swiper-container">
            <div class="swiper-conponents" :autoplay="3000" indicator-color="white">
                <div class="van-swipe-item">
                    <img src="https://cdn.brcrown.com/pragmatic-play/4ce81c0bedb4dcd3a48c56e4c46aa5b1.jpg">
                </div>
                <div class="van-swipe-item">
                    <img src="https://cdn.brcrown.com/pragmatic-play/6042c8acd6fd82bc4ba5073316c0525f.jpg">
                </div>
                <div class="van-swipe-item">
                    <img src="https://cdn.brcrown.com/pragmatic-play/feec943d9fedda77f78fa0040ab090bd.jpg">
                </div>
            </div>
            <van-swipe class="swiper-conponent" :autoplay="3000" indicator-color="white">
                <van-swipe-item>
                    <img src="https://cdn.brcrown.com/pragmatic-play/4ce81c0bedb4dcd3a48c56e4c46aa5b1.jpg">
                </van-swipe-item>
                <van-swipe-item>
                    <img src="https://cdn.brcrown.com/pragmatic-play/6042c8acd6fd82bc4ba5073316c0525f.jpg">
                </van-swipe-item>
                <van-swipe-item>
                    <img src="https://cdn.brcrown.com/pragmatic-play/feec943d9fedda77f78fa0040ab090bd.jpg">
                </van-swipe-item>
                <van-swipe-item>
                    <img src="https://cdn.brcrown.com/pragmatic-play/c3ccf6fd8b058390a52a90d7d600a566.jpg">
                </van-swipe-item>
                <van-swipe-item>
                    <img src="https://cdn.brcrown.com/pragmatic-play/5dfb1eba94d0181ef910f4c6faed6e74.jpg">
                </van-swipe-item>
                <van-swipe-item>
                    <img src="https://cdn.brcrown.com/pragmatic-play/bf9476bdfa994801785a9272dc0df6b2.jpg">
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="tab-container">
            <div
                class="tab-item"
                :class="{active: tabManage.tabIndex == index}"
                v-for="(item, index) in tabManage.data"
                :key="index"
                @click="tabManage.tabIndex = index"
                >{{item.name}}</div>
        </div>
        <div class="list-container" v-show="tabManage.tabIndex == 0">
            <ListTitle :text="list1.title" />
            <SliderList :list="list1.data" />
            <ListTitle :text="list2.title" />
            <SliderList :list="list2.data" type="vertical" />
            <ListTitle :text="list3.title" />
            <SliderList :list="list3.data" type="vertical" />
            <ListTitle :text="list4.title" />
            <SliderList :list="list4.data" type="vertical" />
        </div>
        <div class="list-container" v-show="tabManage.tabIndex == 1">
            <div class="list-content">
                <div
                    class="list-content-item"
                    v-for="(item, index) in list5.data"
                    :key="index"
                >
                    <img :src="item" v-lazy="item" />
                </div>
            </div>
            <div class="more-button">View All 625 Records</div>
        </div>
        <div class="description-container">
          <div class="img">
            <img src="https://adoreibet.com/assets/footer_icon_2-18834dfc.png" />
          </div>
           
            <span >
                Este site oferece jogos com experiencia de risco Para ser um usuario do nosso site,voce deve mais de 18 anos.Nao somos responsaveis.
            </span>
            <span>
                © 2022 brcrown.com All rights reserved.
            </span>
        </div>
        <van-back-top right="83vw" bottom="13vh" class="pho" />
        <van-back-top right="91vw" bottom="13vh" class="pc" />
    </div>
</template>

<script>
import { Swipe, SwipeItem, BackTop } from 'vant'
import ListTitle from './ListTitle.vue'
import SliderList from './SliderList.vue'

export default {
  name: 'App',
  components: {
    VanSwipe: Swipe,
    VanSwipeItem: SwipeItem,
    VanBackTop: BackTop,
    SliderList,
    ListTitle
  },
  data () {
    return {
      tabManage: {
        tabIndex: 0,
        data: [
          {
            name: 'Lobby'
          },
          {
            name: 'Slots'
          }
        ]
      },
      list1: {
        title: 'Game Providers',
        data: [
          'https://cdn.brcrown.com/pragmatic-play/059412d4263dcf225f0ae1c2e9ac45fd.png',
          'https://cdn.brcrown.com/pragmatic-play/711fc75247e85b8015188d8c6a2c6f43.png',
          'https://cdn.brcrown.com/pragmatic-play/c3e80ae935ba4e07241085464ce1c453.png',
          'https://cdn.brcrown.com/pragmatic-play/c1c20c255cc4d77d29acb1cbdcc4e503.png',
          'https://cdn.brcrown.com/pragmatic-play/09f9e1a6550b8133baff958374bb8560.png'
        ]
      },
      list2: {
        title: 'New Games',
        data: [
          'https://cdn.brcrown.com/pragmatic-play/c54861f2c98e7ce06ee81d18417c3ece.png',
          'https://cdn.brcrown.com/pragmatic-play/cfcbb3a5a2e2eba353cbadbdad7d5dbc.png',
          'https://cdn.brcrown.com/pragmatic-play/fb5e162c7b02ca0085c6d732176da4ea.jpg',
          'https://cdn.brcrown.com/pragmatic-play/34d25f4d146dc0312c22ff1dea0edfea.png',
          'https://cdn.brcrown.com/pragmatic-play/2d2b36d46516ec4f2e66d2f77298d1c8.jpg',
          'https://cdn.brcrown.com/pragmatic-play/0b0dff40099a64d3a7402dfbfabba631.jpg',
          'https://cdn.brcrown.com/pragmatic-play/2465941120c6eab4239418a770f887bf.png',
          'https://cdn.brcrown.com/pragmatic-play/4e6bed841f5534158206e2c439701b23.png',
        ]
      },
      
      list3: {
        title: 'Popular Games',
        data: [
          'https://cdn.brcrown.com/pragmatic-play/c54861f2c98e7ce06ee81d18417c3ece.png',
          'https://cdn.brcrown.com/pragmatic-play/fe73c3b25c3880a99c03576aad3f80d0.png',
          'https://cdn.brcrown.com/pragmatic-play/8bad35b6149e7ae59d06fba528aa85c0.jpg',
          'https://cdn.brcrown.com/pragmatic-play/66d5f7a858faf047936ce06893c7682a.png',
          'https://cdn.brcrown.com/pragmatic-play/54f5a8d56671a9250db3a8dd87a3373f.jpg',
          'https://cdn.brcrown.com/pragmatic-play/c8d125e329a49ea50de11902503dba5d.jpg',
          'https://cdn.brcrown.com/pragmatic-play/a113ef6f921ae0c52dd14379f2caa9e4.jpg',
          'https://cdn.brcrown.com/pragmatic-play/cfcbb3a5a2e2eba353cbadbdad7d5dbc.png',
        ]
      },
      list4: {
        title: 'Bouns Slots',
        data: [
          'https://cdn.brcrown.com/pragmatic-play/54f5a8d56671a9250db3a8dd87a3373f.jpg',
          'https://cdn.brcrown.com/pragmatic-play/a113ef6f921ae0c52dd14379f2caa9e4.jpg',
          'https://cdn.brcrown.com/pragmatic-play/3f26800930a48c074e2d0720c3cc0090.jpg',
          'https://cdn.brcrown.com/pragmatic-play/b1e8ba720237f9229d23c01694810415.jpg',
          'https://cdn.brcrown.com/pragmatic-play/2cbc8dcfdf83be46d001b49d9c79ca92.jpg',
          'https://cdn.brcrown.com/pragmatic-play/87206ba0661e97888aba1e36cc8897c4.jpg',
          'https://cdn.brcrown.com/pragmatic-play/4e6bed841f5534158206e2c439701b23.png',
          'https://cdn.brcrown.com/pragmatic-play/93882bdabce055c173a9a263a4c51f52.png',
        ]
      },
      list5: {
        title: 'Slots',
        data: [
          'https://cdn.brcrown.com/pragmatic-play/c54861f2c98e7ce06ee81d18417c3ece.png',
          'https://cdn.brcrown.com/pragmatic-play/fe73c3b25c3880a99c03576aad3f80d0.png',
          'https://cdn.brcrown.com/pragmatic-play/8bad35b6149e7ae59d06fba528aa85c0.jpg',
          'https://cdn.brcrown.com/pragmatic-play/66d5f7a858faf047936ce06893c7682a.png',
          'https://cdn.brcrown.com/pragmatic-play/54f5a8d56671a9250db3a8dd87a3373f.jpg',
          'https://cdn.brcrown.com/pragmatic-play/c8d125e329a49ea50de11902503dba5d.jpg',
          'https://cdn.brcrown.com/pragmatic-play/a113ef6f921ae0c52dd14379f2caa9e4.jpg',
          'https://cdn.brcrown.com/pragmatic-play/cfcbb3a5a2e2eba353cbadbdad7d5dbc.png',
          'https://cdn.brcrown.com/pragmatic-play/b1e8ba720237f9229d23c01694810415.jpg',
        ]
      }
    }
  }
}
</script>

<style lang="scss">
//pc端
@media screen and (min-width: 768px) {
    .content{
      width: 100% !important;
    }
    .swiper-container{
      width: 100% !important;
      margin-top: 2%;
    }
    .swiper-conponent{
      display: none;
    }
    .list-title .more span {
      margin-right: -0.4vw !important;
    }
    .swiper-conponents{
      width: 100% !important;
      display: flex !important;
      justify-content:space-between;
    }
    .van-swipe-item{
      width: 33% !important;
      border-radius: 10px;
      text-align: center;
    }
    .van-swipe-item img{
      width: 90% !important;
      border-radius: 10px;
    }
    .tab-container{
      height: 20px !important;
      margin: 0 !important;
      margin-top: 2% !important;
      padding: 0 5.266667vw !important;
    }
    .tab-item{
      margin-right: 2.266667vw !important;
      line-height: 0.533333vw !important;
      height: 3% !important;
      font-size: 0.8vw !important;
      padding: 1.233333vw !important;
      background-color:  #384550 !important;
    }
    .list-title{
      line-height: 0.866667vw !important;
    }
    .title,.list-title .more{
      font-size: 1.133333vw !important;
    }
    .slider-list{
      display: flex;
      justify-content: space-between;
    }
    .slider-list-item{
      width: 30% !important;
      height: 35px !important;
    }
    .description-container{
      width: 95% !important;
      margin: 0 auto !important;
    }
    .content .description-container{
      padding: 0 !important;
    }
    .content .description-container span{
      font-size: 1vw !important;
    }
    .img{
      width: 100% !important;
      margin: 0 auto !important;
    }
    .img img{
      width: 40% !important;
    }
    .pho{
      display: none !important;
    }
    .pc{
      visibility:visible !important;
    }
    .van-back-top,.van-badge__wrapper{
      width: 4.666667vw !important;
      height: 4.666667vw !important;
      font-size: 1.333333vw !important;
      text-align: center !important;    
      line-height: 5vw !important;
    }
    .content .list-container .list-content-item{
      width: 10.066667vw !important;
      height: 18.4vw !important;
      justify-content: space-around !important;
    }
}
//手机端
.pc{
    visibility:hidden;
    }
.swiper-conponents{
  display: none; 
}
.content {
    .swiper-container {
        padding: 0 16px;
        box-sizing: border-box;

        .swiper-conponent {
            border-radius: 15px;
            overflow: hidden;

            .van-swipe-item {
                font-size: 0;
                img {
                    width: 100%;
                }
            }
        }
    }
    .tab-container {
        display: flex;
        margin: 16px 0;
        padding: 0 16px;

        .tab-item {
            margin-right: 16px;
            padding: 0 15px;
            line-height: 32px;
            font-size: 12px;
            font-weight: bold;
            color: #fff;
            background: rgb(3, 48, 60);
            border-radius: 20px;

            &.active {
                background: rgb(0, 128, 255);
            }
        }
    }
    .list-container {
        padding-bottom: 20px;

        .list-content {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 0 16px;
            box-sizing: border-box;

            &-item {
                display: inline-block;
                vertical-align: middle;
                margin-bottom: 8px;
                    width: 109px;
                    height: 144px;
                border-radius: 8px;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .more-button {
            width: fit-content;
            padding: 11px 20px;
            border-radius: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            color: #ffffffd9;
            background-color: #ffffff1a;
            cursor: pointer;
        }
    }
    .description-container {
        padding: 16px 32px;
        box-sizing: border-box;
        text-align: center;

        img {
            width: 100%;
        }
        span {
            font-size: 12px;
            font-family: Avanti;
            color: rgba(255, 255, 255, 0.6);
        }
    }
}
</style>
